<template>

    <div id="staff-attendance" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div style="box-sizing: border-box;">
                <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item :label="$t('b0t63v7bGsmbXkQdwW4Q0')">
                            <el-select 
                                v-model="searchVal" 
                                filterable 
                                class="m-2" 
                                :placeholder="$t('g6AmUBb2H8qwj8DuC0TH')" 
                                @change="searchChange"
                            >
                                <el-option
                                    v-for="item in searchOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <!-- 人员姓名 -->
							<template v-if="searchVal === '1'">
								<el-input v-model="transferVal" :placeholder="$t('0erGkTy8nyWf7DNsOmA')" />
							</template>

							<!-- 打卡地址 -->
							<template v-else-if="searchVal === '2'">
								<el-input v-model="transferVal" :placeholder="$t('gjrqx2HqNqUkqyeejvY0')" clearable />
							</template>

							<!-- 打卡类型 -->
							<template v-else-if="searchVal === '3'">
								<el-select v-model="transferVal" filterable class="m-2" :placeholder="$t('gvz82Tb8x2MwOo83Aeb7O')" @change="acquireChange" value-key="id">
									<el-option v-for="item in recordPle" :key="item.id" :label="item.label" :value="item.value" />
								</el-select>
							</template>

							<!-- 考勤类型 -->
							<template v-else-if="searchVal === '4'">
								<el-select v-model="transferVal" filterable class="m-2" :placeholder="$t('kanqQk47Ex_6EvKNshOjI')" @change="acquireChange" value-key="id">
									<el-option v-for="item in checkPle" :key="item.id" :label="item.label" :value="item.value" />
								</el-select>
							</template>

							<!-- 考勤数据来源 -->
							<template v-else-if="searchVal === '5'">
								<el-select v-model="transferVal" filterable class="m-2" :placeholder="$t('xUeNqnVdBfFJnzLr7rSr')" @change="acquireChange" value-key="id">
									<el-option v-for="item in sourceOptions" :key="item.id" :label="item.label" :value="item.value" />
								</el-select>
							</template>

							<!-- 位置结果 -->
							<template v-else-if="searchVal === '6'">
								<el-select v-model="transferVal" filterable class="m-2" :placeholder="$t('1IfEn8j1DrXjzRtXJyR4')" @change="acquireChange" value-key="id">
									<el-option v-for="item in resultOptions" :key="item.id" :label="item.label" :value="item.value" />
								</el-select>
							</template>

							<!-- 打卡结果 -->
							<template v-else-if="searchVal === '7'">
								<el-select v-model="transferVal" filterable class="m-2" :placeholder="$t('tFwYkKijDkDiM8YBxlIey')" @change="acquireChange" value-key="id">
									<el-option v-for="item in clockResultOptions" :key="item.id" :label="item.label" :value="item.value" />
								</el-select>
							</template>

							<!-- 打卡结果 -->
							<template v-else>
								<el-date-picker v-model="transferVal" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" placeholder="$t('xYKtSx361Hm1x9r3giOx')">
								</el-date-picker>
							</template>
                        </el-form-item>
                        <el-form-item >
                            <el-button type="primary"  @click="resetClick" icon="ele-Refresh"> {{ $t('rxCkXeM2sO75ltcf8JyVj') }} </el-button>
                            <el-button @click='searchClick' type="primary" icon="ele-Search"> {{ $t('a4Uw6qeAZpctNhl3u7Uge') }} </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="hover" style="margin-top: 8px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">


                                    <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                        <el-table-column type="index" :label="$t('3eKEs1bExAXarYpdJemp')" width="55" align="center" :index="indexMethod" />
                                        <el-table-column min-width="140" :formatter="dataTidyUp" :show-overflow-tooltip="true" prop="v_SourceType" :label="$t('tYNvOhWzAgnsImTdBnm6')" align="center" />
										<el-table-column min-width="140" :show-overflow-tooltip="true" prop="v_PersonnelName" :label="$t('jx9wUgQ2LacGujKdf1lp')" align="center" />
										<el-table-column min-width="140" :show-overflow-tooltip="true" prop="v_Address" :label="$t('xvOTybA7nKr4OxIofJ7aY')" align="center" />
										<el-table-column min-width="140" :show-overflow-tooltip="true" :label="$t('o8LfAgOEu10XHx2vTmr')" align="center">
											<template #default="scope">
												<span v-if="scope.row.n_AtteType === 1">{{ $t('uYr5fFUkDeGOdfQzTwLy') }}</span>
												<span v-else-if="scope.row.n_AtteType === 2">{{ $t('xZ0QCykqaWiqN0WypMk') }}</span>
											</template>
										</el-table-column>
										<el-table-column min-width="160" :show-overflow-tooltip="true" :label="$t('hSi5kWlAPleibyJhaNXwM')" align="center">
											<template #default="scope">
												<span v-if="scope.row.n_AtteType === 1">
													<span v-if="scope.row.d_AtteDate !== ''">{{ scope.row.d_AtteDate }}</span>
													<span v-else>-</span>
												</span>
												<span v-else-if="scope.row.n_AtteType === 2">
													<span v-if="scope.row.d_AtteDate !== ''">{{ scope.row.d_AtteDate }}</span>
													<span v-else>-</span>
												</span>
											</template>
										</el-table-column>
										<el-table-column :label="$t('szrRQuMNuU76vHsuZ3Jqm')" min-width="120" :show-overflow-tooltip="true" align="center">
											<template #default="scope">
												<span v-if="scope.row.n_CheckType === 1">{{ $t('lfNxD8qqKypgsgLeSui1M') }}</span>
												<span v-else-if="scope.row.n_CheckType === 2">{{ $t('uweYoV3tLQd3MGXTdDlJ') }}</span>
											</template>
										</el-table-column>
										<el-table-column min-width="100" :formatter="dataTidyUp" :show-overflow-tooltip="true" prop="v_LocationResult" :label="$t('q5RPuYpuDzAvlnvSpghkn')" align="center" />
										<el-table-column min-width="100" :formatter="dataTidyUp" :show-overflow-tooltip="true" prop="n_TimeResult" :label="$t('xQJloyPxI1OjtTPm7btU')" align="center" />
                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , reactive , toRaw } from 'vue'
import getTableData from '/@/utils/getTableData'
// import { sysPosPage , sysPosDelete } from '/@/api/manage/manage.ts'
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

export default defineComponent( {
    name: 'staff-attendance',
    components: { },
    setup(props){
        const { proxy } = useCurrentInstance();
        const $t = proxy.$t;

        const isUseDialog = ref() // 新增/编辑弹出框隐藏/显示
        const repairInfo = ref() // 传递子组件数据
        const searchVal = ref('1')
        let searchName = '1'
        const transferVal = ref() // 需要查询的值
        let srcList:any = [] // 图片地址
        const searchObj = reactive({})

        /*** 数据来源 数据截取 */
		const dataTidyUp = (row: any, column: any) => {
			// 获取单元格数据
			let data = row[column.property];
			if (data === 'ATM') { return $t('bzh0U6StaHoFe4sPiBwkw') }
			if (data === 'BEACON') { return 'IBeacon' }
			if (data === 'DING_ATM') { return $t('04gt7K8zQfWPrT8fxO4Q') }
			if (data === 'USER') { return $t('jvQs_65SsUg0t40Jo4rLg') }
			if (data === 'BOSS') { return $t('xCzGzWrPww7x1qzaUbtj') }
			if (data === 'APPROVE') { return $t('rZiuNya2wLgV9yg0Wtj_3') }
			if (data === 'SYSTEM') { return $t('y6EoCs73rGt4OiXHuK164') }
			if (data === 'AUTO_CHECK') { return $t('fzNnvmBej9hMhVVca7qg') }

			if (data === 'Normal') { return $t('ohGi6PbKyMWqsS2t2BrbW') }
			if (data === 'Outside') { return $t('dxK0mnHqSg_9ZndbYDyLr') }
			if (data === 'NotSigned') { return $t('qbSytwwYuZpj1utPEo_1x') }
            
            
            if(data === 1) { return $t('r9sleVbTnZtBJaJcBk9Dq') }
            if(data === 2) { return $t('qPlnYv8VcCsxSGRopCu') }
            if(data === 3) { return $t('2wajIEjwyRcOagAe5Ebn') }
            if(data === 4) { return $t('au6xWaxdqozyId0ZnZmW5') }
            if(data === 5) { return $t('pzpcz8V8Xd9SAo6ErwR') }
            if(data === 6) { return $t('sEqIoWqAsDcUmIvCaMZnu') }
		};

        /*** 截取日期格式方法 */
        const formatDate = (row:any, column:any) => {
          // 获取单元格数据
          let data = row[column.property]
          if(data == null) {
              return null
          }
          let dt = new Date(data)
          let month = (dt.getMonth() + 1) < 10 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)
          let date = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()
          return dt.getFullYear() + '-' + month + '-' + date
        }

        /*** 搜索类型选择事件 searchChange */
        const searchChange = (val:any) => {
            searchName = val;
			transferVal.value = '';
        }

        /*** acquireChange 搜索下拉框选择的数据 ---- 传给接口数据 */
        const acquireChange = (val:any) => {
            console.log(val)
        }

        /*** searchClick 查询按钮 */
        const searchClick = () => {
            
        }

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            searchVal.value = '1'
        }

        /*** nodeClick 新增/编辑点击事件 */
        const nodeClick = (val:string | object) => {
            console.log('新增/编辑')
            return
            val !== '' ? repairInfo.value = JSON.stringify(toRaw(val)) : repairInfo.value = ''
            isUseDialog.value = true
        }

        /*** deleteHandle 删除数据事件 */
        const deleteHandle = async (val: String | Number , updateFun: Function) => {
            console.log('删除事件')
            return
            let param = {id : val}
            try {
                // let res = await sysPosDelete(param)
                let res:any = {}
                if(res.success){
                    updateFun()
                }
            } catch (err) { return }
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false
        }

        /*** controlUseClick 提交事件 */
        const controlUseClick = () => {
            isUseDialog.value = false
        }

        /*** lookImg 查看图片 */
        const lookImg = (val:any) => {
            srcList = []
            srcList.push(val.V_PersonnelImage)
        }

        return {
            ...getTableData(()=>{},{},searchObj),
            // ...getTableData(sysPosPage,{},searchObj),
            isUseDialog,
            cancelUseClick,
            controlUseClick,
            nodeClick,
            repairInfo,
            deleteHandle,
            resetClick,
            searchClick,

            searchOptions: [{
                value: '1',
                label: $t('lk7_5tNlOQummRFcxXcez')
            }, {
                value: '2',
                label: $t('c4Kw5BxUg71Nm0JIbF6yq')
            }, {
                value: '3',
                label: $t('oEuHzHDp74a1E4UhiFwS')
            }, {
                value: '4',
                label: $t('bb8WyEk6efIcb6Ex5qKwx')
            }, {
                value: '5',
                label: $t('xdefCfiR5OypTQ4GGacA')
            }, {
                value: '6',
                label: $t('o1vdlGL3xWr_72fkrYny')
            }, {
                value: '7',
                label: $t('1Qlb1MuPxJdr28tIi9hbd')
            }, {
                value: '8',
                label: $t('qNMmdbu1Ph3Zz9_1BTiQp')
            }], // 搜索方式
            searchVal,
            searchChange,
            transferVal,
            acquireChange,
            recordPle: [
				{ id: 1, label: $t('1SgNjSiQjSaaLNcnOsLb'), value: 1 },
				{ id: 2, label: $t('9beFc7EZeUPib7xLwBdU'), value: 2 },
			], // 打卡类型

			checkPle: [
				{ id: 1, label: $t('bfpztt8W34mK5kSBtz'), value: 1 },
				{ id: 2, label: $t('lwyRiBmJvNiLwHQnyzQ4s'), value: 2 },
			], // 考勤类型
			sourceOptions: [
				{ id: 1, value: 'ATM', label: $t('nEw99YOu5jfwiZu09BcM') },
				{ id: 2, value: 'BEACON', label: 'IBeacon' },
				{ id: 3, value: 'DING_ATM', label: $t('4NYb2FlqwTfhvPgzLAsp') },
				{ id: 4, value: 'USER', label: $t('n5QL1fG0wokvrsno7j1o') },
				{ id: 5, value: 'BOSS', label: $t('6J2QGxm2ExmgAnkk2WYce') },
				{ id: 6, value: 'APPROVE', label: $t('oSgrUsfgyGhbgBqi7Gggt') },
				{ id: 7, value: 'SYSTEM', label: $t('tMjuCu8th4y0u3yIfAv') },
				{ id: 8, value: 'AUTO_CHECK', label: $t('9R3RdY2P0Fjb01VLyBxPb') },
			], // 考勤数据来源

			resultOptions: [
				{ id: 1, value: 'Normal', label: $t('wmhkdVBkTpJh6NbFkkUws') },
				{ id: 2, value: 'Outside', label: $t('vuOcmTqHkpsJbKrPrbtl6') },
				{ id: 3, value: 'NotSigned', label: $t('0AghNfTtPwDrmvAxEvxp') },
			], // 位置结果
            
            

			clockResultOptions: [
				{ id: 1, value: '1', label: $t('leMxpj5e21iA7iyyTtw0b') },
				{ id: 2, value: '2', label: $t('nGvKhjZlQqOrSUjNKfF') },
				{ id: 3, value: '3', label: $t('e78r1zf1MenxM4Wj8h7Tq') },
				{ id: 4, value: '4', label: $t('q6zxFGGt6kPvukjXxrFa') },
				{ id: 5, value: '5', label: $t('3J2V0eIxyPm2Y2S1lyuZ') },
				{ id: 6, value: '6', label: $t('fLxuencF1zGcccXuNvvl') },
			], // 打卡结果
            dataTidyUp,
            formatDate,
            lookImg,
        }
    },
} )
</script>
<style scoped lang="scss">
    #staff-attendance {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
    }
</style>